<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { reactive } from 'vue'
import { useThemeStore, useUserStore } from '@/store'
import { useTodoListStore } from '@/stores/list.store'

const { locale } = useI18n()

const props = defineProps<{ visible: boolean }>()
const emit = defineEmits<{
  (e: 'ok'): void
}>()
const handleVisible = () => emit('ok')

const userStore = useUserStore()

/**
 * @desc switch开关状态
 */
const switchState = reactive({
  language: localStorage.getItem('language') === 'en-US'
})

/**
 * @desc 切换语言
 */
const toggleLanguage = (language: unknown) => {
  locale.value = language as string
  localStorage.setItem('language', language as string)
}

/**
 * @desc 切换主题
 */
const toggleTheme = (value: unknown) => {
  userStore.setTheme(value as 'dark' | 'light')
}

/**
 * @desc 重置菜单
 */
const themeStore = useThemeStore()
const themeReset = () => {
  themeStore.reset()
}

/**
 * @desc 重置todo数据
 */
const { clearAllList } = useTodoListStore()
function handleTodoListReset() {
  clearAllList()
}
</script>

<template>
  <a-drawer
    width="300px"
    :closable="false"
    :hide-cancel="true"
    :visible="props.visible"
    :footer="false"
    placement="left"
    @cancel="handleVisible"
  >
    <template #title>
      <IconSettings class="leading-5" />
      {{ $t('setting.title') }}
    </template>
    <div class="setting-options">
      <p class="mt-4">
        <span>{{ $t('setting.language') }}</span>
        <a-switch
          type="round"
          checked-value="en-US"
          checked-color="#165dff"
          unchecked-value="zh-CN"
          unchecked-color="#165dff"
          :default-checked="switchState.language"
          @change="toggleLanguage"
        >
          <template #checked> En </template>
          <template #unchecked> 中 </template>
        </a-switch>
      </p>
      <p>
        <span>{{ $t('setting.dark') }}</span>
        <a-switch
          v-model="userStore.theme"
          type="line"
          checked-value="dark"
          unchecked-value="light"
          @change="toggleTheme"
        >
        </a-switch>
      </p>
      <p>
        <span>{{ $t('setting.theme') }}</span>
        <a-popconfirm :content="$t('setting.warning')" position="tr" type="error" @ok="themeReset">
          <a-button status="danger" size="mini">
            <template #icon>
              <IconDelete />
            </template>
            {{ $t('setting.theme.clean') }}
          </a-button>
        </a-popconfirm>
      </p>
      <p>
        <span>{{ $t('setting.list') }}</span>
        <a-popconfirm
          :content="$t('setting.warning')"
          position="tr"
          type="error"
          @ok="handleTodoListReset"
        >
          <a-button status="danger" size="mini">
            <template #icon>
              <IconDelete />
            </template>
            {{ $t('setting.list.clean') }}
          </a-button>
        </a-popconfirm>
      </p>
    </div>
  </a-drawer>
</template>

<style scoped>
.setting-options p {
  @apply flex p-4 justify-between;
}
</style>
